<template>
	<!--滚动父级-->
	<div id="ratings" ref='ratings'>
		<!--滚动当前级div-->
		<div class="ratings-content">
			<div class="overview">
				<div class="overview-left">
					<div class="score">{{seller.score}}</div>
					<div class="title">综合评分</div>
					<div class="rank">高于周边商家{{seller.rankRate}}</div>
				</div>
				<div class="overview-right">
					<div class="score-wrapper">
						<span class="title">服务态度</span>
						<star :size='36' :score='seller.serviceScore'></star>
						<span class="score-num">{{seller.serviceScore}}</span>
					</div>
					<div class="score-wrapper">
						<span class="title">服务态度</span>
						<star :size='36' :score='seller.serviceScore'></star>
						<span class="score-num">{{seller.foodScore}}</span>
					</div>
					<div class="distribution-wrapper">
						<span class="title">送达时间</span>
						<span class="distribution-time">{{seller.deliveryTime}}分钟</span>
					</div>
				</div>
			</div>
			<split></split>
			<foodratings @stype='changeType' @togContent='togContent' :ratings='ratings' :select-type='selectType' :only-content='onlyContent'></foodratings>
			<div class="ratings-wrapper">
				<div class="ratingItem" v-for="(item,index) in ratings" v-show="ratingShow(item.rateType,item.text)">
					<div class="rat-time fr">{{formatData(item.rateTime)}}</div>
					<div class="rat-main">
						<div class="rat-avatar">
							<img :src="item.avatar"/>
						</div>
						<div class="rat-content">
							<div class="name">{{item.username}}</div>
							<div class="distribution">
								<star :size='36' :score='item.score'></star>
								<span class="distri-time">{{item.deliveryTime}}分钟送达</span>
							</div>
							<div class="text">{{item.text}}</div>
							<div class="rat" v-show="item.recommend && item.recommend.length">
								<span class="icon_rating" :class="{'ratLike': item.rateType==0}"></span>
								<span class="recommond" v-for="sonItem in item.recommend">{{sonItem}}</span>
							</div>
						</div>
					</div>
						
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import star from '../public/star.vue'
	import split from '../public/split.vue'
	import foodratings from '../public/foodRatings.vue'
	import Bscroll from 'better-scroll'
	import {formatData} from '../../common/js/date.js'
	const POSITIVE = 0;/*积极*/
	const NEGATIVE = 1;/*消极*/
	const ALL = 2;/*所有*/
	export default{
		props:{
			seller:{
				type: Object,
				default(){
					return{
						score: 4.2,
						sellCount: 90
					}
				}
			}
		},
		data(){
			return{
				ratings:[],
				selectType:ALL,
				onlyContent:false
			}
		},
		created(){
			this.$http.get('/api/ratings').then((response)=>{
				console.log(response)
	  			if(response.ok){
	  				this.ratings = response.body.data;
				}
	  			this.$nextTick(()=>{
	  				if(!this.foodScroll){
	  					this.foodScroll = new Bscroll(this.$refs.ratings,{
							click:true
						})
	  				}
					
				})
	  		})
		},
		components:{
			star,
			split,
			foodratings
		},
		methods:{
			changeType(selecttype){
				this.selectType = selecttype;
				/*this.$nextTick(()=>{
					this.foodScroll.refresh();
				})*/
			},
			togContent(togContent){
				this.onlyContent = togContent;
				/*this.$nextTick(()=>{
					this.foodScroll.refresh();
				})*/
			},
			formatData(time){
				return formatData(time,'yyyy-MM-dd hh:mm')
			},
			ratingShow(rateType,text){
				//rateType,0与1,喜欢与讨厌
				/*let flag = true;
				if(this.onlyContent&&!text) flag = false;
				if(this.selectType!=2 && this.selectType!=rateType)flag = false;
				return flag;*/
				if(this.onlyContent&&!text){return false};
				if(this.selectType==2){
					return true;
				}else {
					return this.selectType==rateType
				}
			}
		}
	}
</script>

<style lang="stylus">
	.ratings-wrapper{
		padding: 0 18px;
		.ratingItem{
			padding: 18px 0;
			border-bottom: 1px solid rgba(7,17,27,0.1);
			&:last-child{
				border-bottom:none;
			}
			.rat-time{
				font-size: 10px;
				color: rgb(147,153,159);
			}
			.rat-main{
				display: flex;
				width: 100%;
			}
			.rat-avatar{
				flex: 0 0 28px;
				width: 28px;
				margin-right: 12px;
				img{
					width: 18px;
					height: 18px;
					border-radius: 50%;
				}
			}
			.rat-content{
				flex: 1;
				.name{
					font-size: 10px;
					color: rgb(7,17,27);
					margin-bottom: 4px;
				}
				.distribution{
					margin-bottom: 6px;
					font-size: 0;
					.star{
						display: inline-block;
						vertical-align: top;
						margin-right: 6px;
					}
					.distri-time{
						display: inline-block;
						font-size: 10px;
						color: rgb(147,153,159);
						line-height: 14px;
					}
				}
				.text{
					margin-bottom: 8px;
					font-size: 12px;
					color: rgb(7,17,27);
					line-height: 18px;
				}
				.icon_rating{
					width: 11px;
					height: 10px;
					display: inline-block;
					background-repeat:no-repeat ;
					background-size:contain ;
					background-image: url(../../assets/down.fw.png);
					&.ratLike{
						background-image: url(../../assets/up.fw.png);
					}
				}
				.recommond{
					display: inline-block;
					margin: 0 0 4px 8px;
					padding: 2px 6px;
					border: 1px solid rgba(7,17,27,0.1);
					font-size: 9px;
					color: rgb(147,153,159);
					border-radius: 2px;
					line-height: 16px;
				}
				/*.text_rating{
					font-size: 12px;
					color: rgb(7,17,27);
				}*/
			}
		}
	}
	#ratings{
		position: absolute;
		left:0;
		bottom: 0;
		top: 178px;
		width: 100%;
		overflow: hidden;
	}
	.overview{
		display: flex;
		padding: 18px 0;
		.overview-left{
			flex: 0 0 137px;
			width: 137px;
			text-align: center;
			border-right:1px solid rgba(7,17,27,0.1) ;
			@media only screen and (max-width: 320px){
			 	flex: 0 0 120px
	          	width: 120px
			}
          
			.score{
				margin-bottom: 6px;
				font-size: 24px;
				color: rgb(255,153,0);
			}
			.title{
				margin-bottom: 8px;
				font-size: 12px;
				color: rgb(7,17,27);
			}
			.rank{
				margin-bottom: 6px;
				font-size: 10px;
				color: rgba(7,17,27,0.5);
			}
		}
		.overview-right{
			flex: 1;
			padding-left: 24px;
			@media only screen and (max-width: 320px){
			 	padding-left: 6px;
			}
			.score-wrapper{
				margin-bottom: 8px;
				font-size: 0;
				.title{
					line-height: 14px;
					/*display: inline-block;
					vertical-align: top;*/
					font-size: 12px;
					color: rgb(7,17,27);
				}
				.star{
					margin: 0 12px;
					display: inline-block;
					vertical-align: top;
				}
				.score-num{
					line-height: 14px;
					/*display: inline-block;
					vertical-align: top;*/
					font-size: 12px;
					color: rgb(255,153,0);
				}
			}
			.distribution-wrapper{
				font-size: 0;
				.title{
					line-height: 14px;
					font-size: 12px;
					color: rgb(7,17,27);
				}
				.distribution-time{
					margin-left: 12px;
					font-size: 12px;
					color: rgb(147,153,159);
				}
			}
		}
	}
</style>